<template>
<div class="address">
    <van-nav-bar
        title="我的收货地址"
        left-text="返回"
        right-text="新增地址"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="onClickRight"
        />
    <div class="content" v-for="(item,index) in addresslist" :key="index">
        <div class="left">
            <div class="floor">
                {{item.address}}
            </div>
            <div class="contact">
                <div class="name">{{item.name}}</div>
                <div class="phone">
                    {{item.phone}}
                </div>
            </div>
        </div>
        <div class="right">
            <van-icon name="edit" @click="modify(item)" />
        </div>
    </div>

</div>
</template>

<script>
import {address_list} from '../utils/api'
import { mapState } from 'vuex'
export default {
    data(){
        return {
            // list:[],
        }
    },
    mounted(){
        var id = JSON.parse(localStorage.getItem('userinfo')).id;
        this.$store.dispatch('request_address_list');
        // // var id = JSON.parse(window.localStorage.getItem('userinfo')!=='undefined'?window.localStorage.getItem('userinfo'):'[]');
        // console.log(id);
        address_list({userid:id}).then((res)=>{
            this.list = res.data.list;
            console.log(this.list);
        })
        // address_list({userid:id}).then((res)=>{
        // if(res.data.code == 200){
        //     this.list = res.data.list;
        //     var idlist=[];
        //     var index = this.$store.state.addresslist.findIndex((item)=>{
        //     return idlist.push(item.id);
        //   })
        //   if( index != -1 ){
        //     this.$store.state.addresslist.splice(index,1);
        //   }
        //   console.log(res.data.list);
        //   console.log(item.id);
        //   store.commit('save_address_list',res.data.list);
        // }
    //   })
    },
    computed:{
        ...mapState(['addresslist']),
    },
    methods:{
        onClickRight(){
            this.$router.push('/addaddress');
        },
        modify(item){
            // this.$router.push('/modaddress/'+item.id);
            this.$router.push({
                name:'/modaddress',
                query:{list:JSON.stringify({userid:item.userid,addressid:item.id,address:item.address,phone:item.phone,name:item.name})
        }});
        }
    }

}
</script>

<style lang="scss" scoped>
*{
    padding: 0 10px ;
}
.content{
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
        .floor{
            font-size: 18px;
            line-height: 1;
            margin: 10px 10px;
            font-weight: 600;
        }
        .contact{
            font-size: 15px;
            line-height: 1;
            display: flex;
            // justify-content: space-between;
            .name{
                text-align: left;
            }
        }
    }
}
</style>